<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <title>西昌学院成绩课表查询系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .title1 {
            text-align: center;
            font-size: 65px;
            font-weight: 800;
            color: blue;
        }

        h3 {
            text-align: center;
            height: 50px;

        }

        button {
            height: 20px;
            width: 110px;
            background-color: aquamarine;
            color: black;
            border: 0px;
            border-radius: 5px;
        }

        table {
            width: 900px;
            margin: 0px auto 50px auto;
            border-collapse: collapse;
        }

        tr {
            height: 40px;
        }

        td {
            border: 1px solid #000;
            font-size: 20px;
            text-align: center;
        }

        .search {
            width: 700px;
            margin: 50px auto;
        }

        #thead {
            display: none;
        }
        #buttondouble{
            margin: 50px auto;
            width: 500px;
        }
        #get_grade{
            width: 200px;
            height: 50px;
            font-size: 35px;
            line-height: 50px;
            font-weight: 600;
            color: white;
            background-color: chocolate;
        }
        #get_schedule{
            float: right;
            width: 200px;
            height: 50px;
            font-size: 35px;
            line-height: 50px;
            font-weight: 600;
            color: white;
            background-color: green;
        }
        body{
            background-image: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596263504131&di=6014ecc20b7ec0856d24647380808404&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201703%2F20%2F20170320223915_nXJYG.jpeg");
            width: 100%;
            background-size:cover;
            background-repeat: repeat-y;
        }

    </style>
</head>

<body>
    <div class="title1" style="margin-top: 100px">西昌学院</div>
    <div class="title1">成绩课表查询系统</div>
    <div style="width: 300px;margin-left:60%; color:cornflowerblue;font-size: 25px">—— by Bohemian.</div>
    <div class="search">
            <div style="border: 0px;text-align: center;font-size: 45px;margin: 10px auto;line-height: 80px">学号:<input id="username"style="width: 300px;padding-left: 20px; height: 50px;font-size: 35px; border: 0px; border-bottom: 3px solid black;" type="text" maxlength="10" value=""></div>
            <div style="border: 0px;text-align: center;font-size: 45px;margin: 10px auto;line-height: 80px">密码:<input id="password"style="width: 300px;padding-left: 20px; height: 50px;font-size: 35px; border: 0px; border-bottom: 3px solid black;" type="password" value=""></div>
            <div id="buttondouble">
                <button id="get_grade">查询成绩</button>
                <button id="get_schedule">查询课表</button>
            </div>
    </div>

    <h3 id="info"></h3>
    <div id="chooseWeekDay" style="height: 50px;width: 900px;display: none;margin: 0 auto;">
        <div style="border: 0px;float: left;font-size: 30px">周数:<input id="todaytime" style="height: 100%;width:80px; font-size: 30px;border: 2px solid black;border-radius: 20px;padding-left: 10px; margin-left: 10px" value="2" type="number" maxlength="2" focus="false" bindinput="">
        </div>
        <div style="border: 0px;float: left;margin-left: 100px">
            <form style="float:left;font-size: 30px">星期:
                <select name="cars" id="nowDay" style="height: 100%;font-size: 30px;border: 2px solid black;border-radius: 20px;padding-left: 10px; margin-left: 10px">
                    <option class="day1" value="1" selected>一</option>
                    <option class="day2" value="2">二</option>
                    <option class="day3" value="3">三</option>
                    <option class="day4" value="4">四</option>
                    <option class="day5" value="5">五</option>
                    <option class="day6" value="6">六</option>
                    <option class="day7" value="7">日</option>
                </select>
            </form>
        </div>
        <div style="float: right;color: red;line-height: 20px;padding-left: 20px">
            &nbsp;&nbsp;(未开学，默认查询<br> <b>第二周</b>、<b>星期一</b> 的课程)
        </div>
        <div style="border: 0px;float: right;">
            <button id="get_sche" style="height: 40px;background-color: bisque;font-size: 25px;font-weight: 600">查询</button>
        </div>
    </div>
    <table>
        <tr id="thead">

        </tr>
        <tbody id="myGrades">

        </tbody>

        <tbody id="mySchedule">

        </tbody>
    </table>
    <div style="width: 200px;margin: 0 auto;text-align: center;font-size: 30px;color: cornflowerblue">
        <a onclick="shuoming()">隐私与关于</a><br><br><br>
        <a href="https://jwxt.xcc.edu.cn/">教务系统</a>
    </div>
    <script type="text/javascript">
        //获取数据渲染到页面
        var btn1 = document.getElementById('get_grade')
        var btn2 = document.getElementById('get_schedule')
        var btn3 = document.getElementById('get_sche')
        var choosetb = document.getElementById('chooseWeekDay')

        btn1.onclick = function () {
            mySchedule.innerHTML = ''
            choosetb.style.display = "none"
            var username = $("#username").val();
            var password = $("#password").val();

            // $('#thead').css('display','table-row');

            var data = {
                "username": username,
                "password": password
            }

            var result = '';
            $.ajax({
                url: "http://127.0.0.1:5000/grade",
                type: "POST",
                data: data,
                success: function (callback) {
                    console.log(callback)
                    var data = callback
                    var html0 = '';
                    html0 += "<h3>姓名：" + data.name + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学号：" + data.studentId + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学年：" + data.schoolYear + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学期：" + data.schoolTerm + "</h3>"

                    var html1 = '';
                    html1 += '<div style="height: 50px;width: 100%"></div>'
                    html1 += "<tr>";
                    html1 += "<td>序号</td><td>课程</td><td>学分</td><td>成绩</td><td>老师</td><td>学院</td>"
                    html1 += "</tr>";
                    for (var i = 0; i < data.course.length; i++) {
                        var result = data.course[i];
                        index = i + 1;
                        html1 += "<tr>";
                        html1 += "<td>" + index + "</td><td>" + result.courseTitle + "</td><td>" + result.credit + "</td><td>" + result.grade + "</td><td>" + result.teacher + "</td><td>" + result.startCollege + "</td>"
                        html1 += "</tr>";
                    }
                    info.innerHTML = html0
                    myGrades.innerHTML = html1
                }
            })


            // var xhr = new XMLHttpRequest();
            // xhr.open('GET','http://127.0.0.1:5000/grade');
            // xhr.onreadystatechange = function () {
            //     if(xhr.readyState == 4 && xhr.status == 200){
            //         //console.log(xhr.responseText);
            //         //已经拿到了数据，数据是字符串类型
            //         //需要把这个字符串转成我们的js对象
            //         var data = xhr.responseText;
            //         data = JSON.parse(data);
            //         //console.log(data)
            //
            //         var html0 = '';
            //         html0 += "<h3>姓名："+data.name+"   学号："+data.studentId+"   学年："+data.schoolYear+"   学期："+data.schoolTerm+"</h3>"
            //
            //         var html1 = '';
            //         for (var i = 0;i < data.course.length; i++){
            //             var result = data.course[i];
            //             index = i+1;
            //             html1 += "<tr>";
            //             html1 += "<td>"+index+"</td><td>"+result.courseTitle+"</td><td>"+result.credit+"</td><td>"+result.grade+"</td><td>"+result.teacher+"</td><td>"+result.startCollege+"</td>"
            //             html1 += "</tr>";
            //         }
            //         info.innerHTML = html0
            //         myGrades.innerHTML = html1
            //
            //     }
            // }
            // xhr.send()
        }
        btn2.onclick = function () {
            choosetb.style.display = "table"
            myGrades.innerHTML = ''
            var username = $("#username").val();
            var password = $("#password").val();
            // $('#thead').css('display','table-row');

            var data = {
                "username": username,
                "password": password,
                // "nowWeek": 5,
                // "nowDay": 1
            }
            var d = new Date();
            var nowWeek = 2;  //假如现在是第五周
            //var nowDay = d.getDay();     //获取今天星期几
            var nowDay = 1;     //假如现在是星期一
            $.ajax({
                url: "http://127.0.0.1:5000/schedule",
                type: "POST",
                data: data,
                success: function (callback) {
                    console.log(callback)
                    var data = callback
                    var html2 = '';
                    html2 += "<h3>姓名：" + data.name + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学号：" + data.studentId + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学年：" + data.schoolYear + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学期：" + data.schoolTerm + "</h3>"
                    var html3 = '';
                    html3 += "<tr>";
                    html3 += "<td>节数</td><td>课程名称</td><td>老师</td><td>周数</td><td>学分</td><td>时间</td>"
                    html3 += "</tr>";
                    for (var i = 0; i < data.normalCourse.length; i++) {
                        if (data.normalCourse[i].courseWeekday == nowDay) {
                            let arr = data.normalCourse[i].includeWeeks;
                            let index = arr.indexOf(nowWeek);
                            if (index !== -1) {
                                //console.log('名称：'+data.normalCourse[i].courseTitle+'-----老师：'+data.normalCourse[i].teacher+'-----周数：'+data.normalCourse[i].courseWeek+'-----节数：'+data.normalCourse[i].courseSection+'-----时间：'+data.normalCourse[i].courseTime+'-----学分：'+data.normalCourse[i].credit)
                                html3 += "<tr>";
                                html3 += "<td>" + data.normalCourse[i].courseSection + "</td><td>" + data.normalCourse[i].courseTitle + "</td><td>" + data.normalCourse[i].teacher + "</td><td>" + data.normalCourse[i].courseWeek + "</td><td>" + data.normalCourse[i].credit + "</td><td>" + data.normalCourse[i].courseTime + "</td>"
                                html3 += "</tr>";
                            }
                        }
                    }
                    mySchedule.innerHTML = html3
                    info.innerHTML = html2

                    // for(var i = 0;i < data.normalCourse.length; i++){
                    //     var str = data.normalCourse[i].courseWeek
                    //     var result = str.match(/\d+/g)
                    //     if (result.length == 1){
                    //         if (nowWeek == result[0]){
                    //             console.log("上课去吧！你的课在%d周，当前是%d周" ,Number(result[0]), nowWeek)
                    //         }
                    //         // else{
                    //         //     console.log("未到上课时间，你的课在%d周，当前是%d周" ,Number(result[0]), nowWeek)
                    //         // }
                    //     }else{
                    //         if (nowWeek >= Number(result[0])  && nowWeek <= Number(result[1])){
                    //             console.log("上课去吧！你的课在%d至%d周，当前是%d周",Number(result[0]), Number(result[1]), nowWeek)
                    //         }
                    //         // else{
                    //         //     console.log("未到上课时间，你的课在%d至%d周，当前是%d周" ,Number(result[0]), Number(result[1]), nowWeek)
                    //         // }
                    //     }
                    // }
                    //var str = data.normalCourse[2].courseWeek

                }
            })
        }
        btn3.onclick = function(){
            myGrades.innerHTML = ''
            choosetb.style.display = "table"
            var username = $("#username").val();
            var password = $("#password").val();
            // $('#thead').css('display','table-row');
            var data = {
                "username": username,
                "password": password,
            }
            var nowWeek = $("#todaytime").val();
            var nowDay = document.getElementById("nowDay").value;;
            nowWeek = Number(nowWeek)
            nowDay = Number(nowDay)
            console.log(nowWeek)
            console.log(nowDay)
            $.ajax({
                url: "http://127.0.0.1:5000/schedule",
                type: "POST",
                data: data,
                success: function (callback) {
                    console.log(callback)
                    var data = callback
                    var html2 = '';
                    html2 += "<h3>姓名：" + data.name + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学号：" + data.studentId + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学年：" + data.schoolYear + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;学期：" + data.schoolTerm + "</h3>"
                    var html3 = '';
                    html3 += "<tr>";
                    html3 += "<td>节数</td><td>课程名称</td><td>老师</td><td>周数</td><td>学分</td><td>时间</td>"
                    html3 += "</tr>";
                    for (var i = 0; i < data.normalCourse.length; i++) {
                        if (data.normalCourse[i].courseWeekday == nowDay) {
                            let arr = data.normalCourse[i].includeWeeks;
                            let index = arr.indexOf(nowWeek);
                            if (index !== -1) {
                                //console.log('名称：'+data.normalCourse[i].courseTitle+'-----老师：'+data.normalCourse[i].teacher+'-----周数：'+data.normalCourse[i].courseWeek+'-----节数：'+data.normalCourse[i].courseSection+'-----时间：'+data.normalCourse[i].courseTime+'-----学分：'+data.normalCourse[i].credit)
                                html3 += "<tr>";
                                html3 += "<td>" + data.normalCourse[i].courseSection + "</td><td>" + data.normalCourse[i].courseTitle + "</td><td>" + data.normalCourse[i].teacher + "</td><td>" + data.normalCourse[i].courseWeek + "</td><td>" + data.normalCourse[i].credit + "</td><td>" + data.normalCourse[i].courseTime + "</td>"
                                html3 += "</tr>";
                                console.log("1000")
                            }
                        }
                    }
                    mySchedule.innerHTML = html3
                    info.innerHTML = html2

                }
            })
        }
        function shuoming(){
            alert('     本平台可以查询成绩以及每日课表信息。' +
                '做平台的目的在于完成教务系统爬取信息接口 ，为以后学习和做项目做做准备。其他同学如果觉得好用的话可以使用。' +
                '平台一直开放在公网，并保证使用者学号信息以及个人隐私不被泄露，有任何问题或者对这方面开发与学习的，联系我交流哦！18计科二班何东 QQ：2605191106 ')
        }
    </script>
</body>

</html>